<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="component">
        <my-component></my-component>
        <my-data></my-data>
        <my-data></my-data>
        <my-data></my-data>
    </div>
    -----------------------------------
    <div id="child">
        <child-component></child-component>
        <child-sec></child-sec>
        <my-component></my-component>
    </div>
</body>
<script src="http://cdn.bootcss.com/vue/2.2.1/vue.js"></script>
<script>
Vue.component('my-component',{      /*这里是option而不是function，而且是全局的*/
    template : "<div>this is first component!</div>"
});

Vue.component('my-data',{      /*这里是option而不是function，而且是全局的*/
    template : "<button v-on:click='count += 1'>{{count}}</button>",
    data : function () {    //一定注意，组件中的data一定是一个函数，否则会报错
        return {count : 0}
    }
});
var vm = new Vue({
    el : "#component"
});

//以下的都是局部的
var child = {
    template : '<div>this is child component!</div>'
}
var childSec = {
    template : '<div>this is childSec component!</div>'
}

var demo = new Vue({
    el : "#child",
    components : {
        'child-component' : child,
        'child-sec' : childSec
    }
});
</script>
</html>